<template>
	<up-popup :show="show" @close="close" :closeable="true" :round="12" zIndex="100000" bgColor="#F1F2F6">
		<view class="container_pop">
			<view class="topmoney">
				<span class="span">￥</span>{{totalMoney}}
			</view>
			<view style="color: #EA0000;font-size: 28rpx;text-align: center;">当前支付方式余额不足，可选择组合支付</view>
			<view class="yt-list" style="box-sizing: border-box;">
				<up-radio-group v-model="radiovalue1" >
					<up-cell-group :border="false">
						<up-cell  title="微信" >
							<template #icon>
								<img src="@/static/wx.png" alt="" style="width:48rpx;height:48rpx;"/>
							</template>
							<template #value>
								<up-radio shape="circle" activeColor="#E94816" name="wx"></up-radio>
							</template>
						</up-cell>
					</up-cell-group>
				</up-radio-group>
			</view>
			<view class="yt-list" style="box-sizing: border-box;">
				<view class="yt-list-cell b-b" style="border-bottom: 1px solid #EAEAEA;">
					<text class="cell-tit clamp">平台余额支付</text>
					<text class="cell-tip">￥179.88</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp"></text>
					<text class="cell-tip">合计：<text style="color: #E94816;">￥179.88</text></text>
				</view>
			</view>
			<view class="footer">
				<view class="cart">
					<view class="cart-button">
								<view class="cart-icon" @click="showCar">
									<image class="img" :class="{active}" mode="widthFix" src="@/static/Vector.png">
									</image>
									<view class="badge">
										<up-badge bgColor="#F03717" max="99" :value="num"></up-badge>
									</view>
								</view>
				
					</view>
					<view class="cart-prices">
						<view class="price">
							<view class="payableAmount">
								¥<text class="text">{{price || 0}}</text>
							</view>
							<view class="totalAmount">
								<text class="text">预估配送费￥300</text>
							</view>
						</view>
					</view>
					<view class="cart-preview" @click="submit">下一步</view>
				</view><view style="width: 100%;height: 46rpx;background-color: #fff;"></view>
			</view>
		</view>
	</up-popup>	
</template>

<script>
	export default {

		data() {
			return {
				show:false,
				totalMoney:'1000',
				radiovalue1:'wx'
			};
		},
		methods: {
			setup(e) {
				this.show = true;
				this.totalMoney = e
			},
			close(){
				this.show = false;
			},
			submit(){
				uni.navigateTo({
					url: '/pages/order/order_detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container_pop{
		width: 100%;
		height: 800rpx;
		padding: 16rpx;
		box-sizing: border-box;
		position: relative;
			overflow: hidden;
			.topmoney{
				font-size: 56rpx;
				color:#272727;
				text-align: center;
				margin-top: 60rpx;
				margin-bottom: 20rpx;
				.span{
					font-size: 26rpx;
				}
			}
			.yt-list {
				margin:22rpx auto;
				margin-top: 16rpx;
				background: #fff;
				padding-bottom: 1px;
				width: 718rpx;
				border-radius: 30rpx;
			}
			.yt-list-cell {
				display: flex;
				align-items: center;
				padding: 10rpx 30rpx 10rpx 40rpx;
				line-height: 70rpx;
				position: relative;
			
				&.cell-hover {
					background: #fafafa;
				}
			
				&.b-b:after {
					left: 30rpx;
				}
			
				.cell-icon {
					height: 32rpx;
					width: 32rpx;
					font-size: 22rpx;
					color: #fff;
					text-align: center;
					line-height: 32rpx;
					background: #f85e52;
					border-radius: 4rpx;
					margin-right: 12rpx;
			
					&.hb {
						background: #ffaa0e;
					}
			
					&.lpk {
						background: #3ab54a;
					}
			
				}
			
				.cell-more {
					align-self: center;
					font-size: 24rpx;
					color:#eee;
					margin-left: 8rpx;
					margin-right: -10rpx;
				}
			
				.cell-tit {
					flex: 1;
					font-size: 26rpx;
					color: #333;
					margin-right: 10rpx;
				}
			
				.cell-tip {
					font-size: 26rpx;
					text-align: right;
					&.disabled {
						color:#333;
					}
			
					&.active {
						color: '#';
					}
					&.red{
						color: red;
					}
				}
			
				&.desc-cell {
					.cell-tit {
						max-width:136rpx;
					}
				}
			
				.desc {
					flex: 1;
					font-size:24rpx;
					color: #333;
				}
			}
			.footer{
				position: fixed;
				left: 0;
				bottom: 46rpx;
				z-index: 995;
				width: 100%;
				height: 90rpx;
				justify-content: space-between;
				font-size: 30rpx;
				background-color: #fff;
				z-index: 998;
				color:#333;
				box-shadow: 0 -1px 5px rgba(0,0,0,.1);
				.cart {
					z-index: 99999;
					background: $uni-bg-color;
					display: flex;
					align-items: center;
					color: #858687;
					// flex: 1;
					flex-direction: row;
					width: 100%;
					height: 106rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				
					&-icon {
						position: relative;
						margin-right: 20rpx;
				
						.img {
							width: 66rpx;
							transition: transform 0.3s ease;
							margin-top: 12rpx;
				
							&.active {
								transform: scale(1.5);
							}
						}
				
						.badge {
							position: absolute;
							right: -10rpx;
							top: -10rpx
						}
					}
				
					&-prices {
						flex: 1;
						font-size: 28rpx;
						flex-direction: row;
				
						.price {
							display: flex;
							flex-direction: column;
						}
				
						.text {
							color: #3D3D3D;
							font-size: 26rpx;
						}
				
						.payableAmount {
							// color: #fff;
							flex-direction: row;
							font-size: 26rpx;
							color: #E94816;
							font-weight: 500;
				
							.text {
								color: #E94816;
								font-size: 48rpx;
							}
						}
				
						.number {
							font-size: 40rpx;
						}
					}
				
					&-preview {
						width: 200rpx;
						height: 76.9rpx;
						border-radius: 67.42rpx;
						position: relative;
						display: flex;
						justify-content: center;
						background: #0B9EE2;
						line-height: 76.9rpx;
						font-size: 26.38rpx;
						color: #ffffff;
					}
				}
				
				.cart2 {
					bottom: 50rpx;
					justify-content: flex-end;
				}
			}
	
	}
</style>